<template>
	<div :style="{height:height}" style="overflow: hidden;" @click.stop="hideAllPopOver" class="navigation-wrap-panel">
		<!-- <el-tabs v-model="activeName" @tab-click="handleNavTabClick">
			<el-tab-pane label="PC端入口" name="first">
				<nav-home ref="navhome"
						  :hasManagerAC="hasManagerAC"
						  :isSubAdmin="isSubAdmin"
						  :currentAppId="currentAppId"
						  :isYijingCloud="isYijingCloud"
				></nav-home>
			</el-tab-pane>
			<el-tab-pane label="移动端入口" name="second" :lazy="true">
				<mobile-home ref="mobilehome" v-if="currentAppId==''" :haveWorkbenchCmd="haveWorkbenchCmd"></mobile-home>
				<div :style="{height:appResourceHeight}" v-if="currentAppId!=''">
					<app-resource v-if="currentAppId!=''" @refreshList="refreshAppList" ref="appResource" :haveWorkbenchCmd="haveWorkbenchCmd" :appInfo="appInfo" :isCollapse="false" :currentAppId="currentAppId"></app-resource>
				</div>
			</el-tab-pane>
		</el-tabs> -->

	</div>
</template>
<script lang="ts">
    import {defineComponent, getCurrentInstance, nextTick, onMounted, ref} from "vue";
    import NavHome from "../../views/home/NavHome.vue";
    import MobileHome from "../../views/home/MobileHome.vue";
    import AppResource from "../../views/mobile/AppResource.vue";

    export default defineComponent({
		name: "NavigationData",
		props: {
			"currentAppId": {
				type: String
            }
		},
		components: {
			NavHome, MobileHome, AppResource
		},
        setup(props: any, cxt) {
			const instance = getCurrentInstance();
			let settingParam = instance?.appContext.config.globalProperties.AWSPageContext.settingParam;
            const urlAxios = instance?.appContext.config.globalProperties.awsuiaxios;
            const {proxy} = getCurrentInstance() as any;
            const sid = ref("");
            const activeName = ref("first");
            let appInfo = ref({});
            let haveWorkbenchCmd = ref(true);
            let hasManagerAC = ref(false);
            let isSubAdmin = ref(false);
            let isYijingCloud = ref(false);

            let height = ref('');
            height.value = (document.documentElement.clientHeight) + 'px';

            let appResourceHeight = ref('');
            appResourceHeight.value = (document.documentElement.clientHeight - 55) + 'px';

			onMounted(() => {
				handleNavTabClick();
                getInitData();
			});

            const hideAllPopOver = () => {
				if (instance != null) {
					(instance.refs["navhome"] as any).hidePopOver();
                    if (props.currentAppId == "") {
                        if ((instance.refs["mobilehome"] as any) != undefined) {
                            (instance.refs["mobilehome"] as any).hidePopOver();
                        }

                    }
				}
			};
			const handleNavTabClick = () => {
				nextTick(() => {
				    //调整tab active下划线的长度
                    let activeItem = proxy.$el.querySelector('.el-tabs__item.is-active');
                    let activeBar = proxy.$el.querySelector('.navigation-wrap-panel .el-tabs__active-bar');
                    if (activeBar != undefined) {
                        activeBar.className = activeBar.className.replace("firstWidth", "").replace("secondWidth", "");
                        if (activeItem.id == "tab-first") {
                            activeBar.className += ' firstWidth';
                        } else {
                            activeBar.className += ' secondWidth';
                        }
					}

				});
			};


            const getCurrentAppInfo = (appId: any) => {
                let data = {
                    url: 'jd',
                    data: {
                        cmd: 'CONSOLE_P_NAV_GET_APP_INFO',
                        sid: settingParam.sessionId,
                        appId: appId
                    }
                };
                urlAxios.post(data).then(function (ro: any) {
                    if (ro.result == "ok") {
                        appInfo.value = ro.data.appInfo;
                    }
                });

            };

            const getInitData = () => {

                let appId = props.currentAppId;
                let data = {
                    url: 'jd',
                    data: {
                        cmd: 'CONSOLE_P_NAV_HOME_GET_INIT_DATA',
                        sid: settingParam.sessionId,
                        appId: appId
                    }
                };
                // 查询数据
                urlAxios.post(data).then(function (ro: any) {
                    if (ro.result == "ok") {
                        console.log(ro.data);
                        appInfo.value = ro.data.appInfo;
                        hasManagerAC.value = ro.data.hasManagerAC;
                        isSubAdmin.value = ro.data.isSubAdmin;
                        haveWorkbenchCmd.value = ro.data.haveWorkbenchCmd;
                        isYijingCloud.value = ro.data.isYijingCloud;
                    }
                });
            };

            return {
                height,
                appResourceHeight,
                activeName,
 				sid,
                appInfo,
                haveWorkbenchCmd,
                hasManagerAC,
                isSubAdmin,
                isYijingCloud,
                hideAllPopOver,
				handleNavTabClick,
                getCurrentAppInfo,
                getInitData,
  			};
		}
	});
</script>
<style>
	.navigation-wrap-panel .el-tabs__nav-wrap:after {
		height: 1px !important;
	}

	.navigation-wrap-panel .el-tabs__active-bar {
		height: 1px !important;
	}

	.el-tabs--left .el-tabs__header.is-left:after {
		width: 1px !important;
	}

	el-tabs__active-bar.is-left {
		width: 1px !important;
	}

	.el-tabs__active-bar.firstWidth {
		width: 50px !important;
		transform: translateX(5px) !important;
	}

	.el-tabs__active-bar.secondWidth {
		width: 60px !important;
		transform: translateX(107px) !important;
	}

	.el-tabs__nav.is-top {
		left: 50% !important;
		transform: translateX(-50%) !important;
	}

	.el-tabs__item {
		font-weight: normal !important;
	}

	.el-overlay.is-message-box {
		display: block !important;
	}

	.el-overlay .el-drawer.rtl {
		-webkit-animation: none !important;
		animation: none !important;
		right: 0 !important;
	}
</style>